{# **
 * Copyright since 2007 PrestaShop SA and Contributors
 * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is bundled with this package in the file LICENSE.md.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/OSL-3.0
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@prestashop.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to https://devdocs.prestashop.com/ for more information.
 *
 * @author    PrestaShop SA and Contributors <contact@prestashop.com>
 * @copyright Since 2007 PrestaShop SA and Contributors
 * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
 * #}
{% extends '@PrestaShop/Admin/layout.html.twig' %}
{% trans_default_domain 'Admin.Design.Feature' %}

{% block content %}
    {% if isSingleShopContext %}
      <div class="row">
        <div class="col-md-3 order-first order-md-last">
          <div class="card" id="modules-position-selection-panel">
            <h3 class="card-header">
              <i class="material-icons">check</i>
              {{ 'Selection'|trans({}, 'Admin.Global') }}</h3>
            <div class="card-body">
              <p>
                <span id="modules-position-single-selection">{{ '1 module selected'|trans }}</span>
                <span id="modules-position-multiple-selection">
                  <span id="modules-position-selection-count"></span>
                  {{ 'modules selected'|trans({}, 'Admin.Design.Feature') }}
                </span>
              </p>
              <div>
                <button class="btn btn-primary">
                  <i class="icon-remove"></i>
                  {{ 'Unhook the selection'|trans }}</button>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-9 order-md-first">
          <div class="card card-body">
            <div class="card bg-light p-3">
              <form id="position-filters">
                <div class="row">
                  <div class="col-lg-6 mb-2">
                    <div class="row align-items-center">
                      <label class="form-control-label col-md-4 text-left text-lg-center">{{ 'Show'|trans({}, 'Admin.Actions') }}</label>
                      <div class="col-md-8">
                        <select id="show-modules" class="filter">
                          <option value="all">{{ 'All modules'|trans }}&nbsp;</option>
                          {% for module in modules %}
                            <option value="{{ module.id }}" {% if selectedModule == module.id %} selected="selected" {% endif %}>{{ module.displayName }}</option>
                          {% endfor %}
                        </select>
                      </div>
                    </div>
                  </div>

                  <div class="col-lg-6 mb-2">
                    <div class="row align-items-center">
                      <label class="form-control-label col-md-4 text-left text-lg-center">{{ 'Search for a hook'|trans }}</label>
                      <div class="input-group col-md-8">
                        <div class="input-group-prepend">
                          <div class="input-group-text">
                            <i class="material-icons">search</i>
                          </div>
                        </div>
                        <input type="text" class="form-control" id="hook-search" name="hook-search" placeholder="">
                      </div>
                    </div>
                  </div>
                </div>

                <p class="checkbox mt-3 mb-0">
                  <label class="form-control-label" for="hook-position">
                    <input type="checkbox" id="hook-position"/>
                    <label class="selectbox" for="hook-position">
                      <i class="material-icons done">done</i>
                    </label>
                    {{ 'Display non-positionable hooks'|trans }}
                  </label>
                </p>
              </form>
            </div>

            <form id="module-positions-form" method="post"
                  action="{{ path('admin_modules_positions_unhook') }}"
                  data-update-url="{{ path('api_improve_design_positions_update') }}"
                  data-togglestatus-url="{{ path('admin_modules_positions_toggle_status') }}">
              {% for hook in hooks %}
                <section
                  class="hook-panel{% if not hook['position'] %} hook-position{% else %} hook-visible{% endif %}" {% if not hook['position'] %} style="display:none;" {% endif %}
                  data-hook-name="{{ hook['name'] }}">
                  <a name="{{ hook['name'] }}"></a>
                  <header class="hook-panel-header">
                    <span class="hook-status">
                      <input class="switch-input-md hook-switch-action"
                             data-toggle="switch"
                             data-hook-id="{{ hook['id_hook'] }}"
                             type="checkbox"
                             value="{{ hook['active'] }}"
                             {{ hook['active'] ? 'checked="checked"' : '' }}
                      />
                    </span>
                    <span class="hook-name">{{ hook['name'] }}</span>
                    {% if hook['title'] is defined %}
                      <span class="help-box" data-toggle="popover" data-trigger="hover" data-html="true" data-content="{{ hook['title'] }}" data-placement="top">
 </span>
                    {% endif %}
                    <label class="badge badge-pill float-right">
                      {% if hook['modules_count'] and isSingleShopContext %}
                        <input type="checkbox" class="hook-checker"
                               id="Ghook{{ hook['id_hook'] }}"
                               data-hook-id="{{ hook['id_hook'] }}"
                        />
                        <label class="selectbox" for="Ghook{{ hook['id_hook'] }}">
                          <i class="material-icons done">done</i>
                        </label>
                      {% endif %}

                      {{ hook['modules_count'] }}
                      {{ ((hook['modules_count'] > 1) ? 'Modules' : 'Module')|trans({}, 'Admin.Global') }}
                    </label>

                    {% if hook['description'] is defined %}
                      <div class="hook_description">{{ hook['description'] }}</div>
                    {% endif %}
                  </header>

                  {% if hook['modules_count'] %}
                    <section class="module-list{% if not hook['active'] %}-disabled{% endif %}">
                      <ul class="list-unstyled{% if hook['modules_count'] > 1 %} sortable{% endif %}">
                        {% for module in hook['modules']|filter(module => modules[module['id_module']] is defined) %}
                          {% set moduleInstance = modules[module['id_module']] %}
                          <li id="{{ hook['id_hook'] ~ '_' ~ moduleInstance.id }}"
                              class="module-position-{{ moduleInstance.id }} module-item{% if hook['modules_count'] >= 2 %} draggable{% endif %}">

                            <div class="module-column-select">
                              <i class="material-icons drag_indicator">drag_indicator</i>
                              <input type="checkbox"
                                     id="selecterbox{{ hook['id_hook'] ~ '_' ~ moduleInstance.id }}"
                                     data-hook-id="{{ hook['id_hook'] }}"
                                     data-hook-module="{{ moduleInstance.name }}"
                                     class="modules-position-checkbox hook{{ hook['id_hook'] }}"
                                     name="unhooks[]"
                                     value="{{ hook['id_hook'] ~ '_' ~ moduleInstance.id }}"
                              />
                              <label class="selectbox" for="selecterbox{{ hook['id_hook'] ~ '_' ~ moduleInstance.id }}">
                                <i class="material-icons done">done</i>
                              </label>
                            </div>

                            <div class="module-column-icon">
                              <img src="{{ asset('../modules/' ~ moduleInstance.name ~ '/logo.png') }}" alt="{{ moduleInstance.displayName|escape }}"/>
                            </div>

                            <div class="module-column-infos">
                              <span class="module-name">
                                {{ moduleInstance.displayName|escape }}
                                {% if moduleInstance.version %}
                                  <small class="text-muted">&nbsp;-&nbsp;{{ 'v%s'|format(moduleInstance.version) }}</small>
                                {% endif %}
                              </span>
                            </div>

                            <div class="module-column-description{% if not selectedModule and hook['modules_count'] > 1 %} hasColumnPosition{% endif %} d-none d-md-table-cell">
                              <span class="module-description">{{ moduleInstance.description|escape }}</span>
                            </div>

                            {% if not selectedModule and hook['modules_count'] > 1 %}
                              <div class="btn-toolbar text-center module-column-position{% if hook['modules_count'] >= 2 %} dragHandle{% endif %}"
                                   id="td_{{ hook['id_hook'] ~ '_' ~ moduleInstance.id }}">
                                <div class="btn-group">
                                  <span class="index-position">{{ loop.index }}</span>
                                </div>
                              </div>
                            {% endif %}

                            <div class="module-column-actions">
                              <div class="btn-group">
                                {% set linkParams = {
                                  id_module: moduleInstance.id,
                                  id_hook: hook['id_hook'],
                                  editGraft: 1
                                } %}
                                {% if selectedModule %}
                                  {% set linkParams = linkParams|merge({show_modules: selectedModule}) %}
                                {% endif %}

                                <a class="btn tooltip-link" href="{{ getAdminLink('AdminModulesPositions', true, linkParams) }}"
                                   aria-label="{{ 'Edit'|trans({}, 'Admin.Actions') }}" title="{{ 'Edit'|trans({}, 'Admin.Actions') }}">
                                  <i class="material-icons">edit</i>
                                </a>

                                <a class="btn tooltip-link dropdown-toggle dropdown-toggle-dots dropdown-toggle-split no-rotate"
                                   data-toggle="dropdown"
                                   aria-haspopup="true"
                                   aria-expanded="false"
                                   data-reference="parent">
                                </a>
                                <div class="dropdown-menu">
                                  <a class="dropdown-item" href="{{ path('admin_modules_positions_unhook', {moduleId: moduleInstance.id, hookId: hook['id_hook']}) }}">
                                    <i class="material-icons">indeterminate_check_box</i>
                                    {{ 'Unhook'|trans({}, 'Admin.Design.Feature') }}
                                  </a>
                                </div>
                              </div>
                            </div>

                            <div class="module-column-description d-block d-md-none w-100">
                              <span class="module-description">{{ moduleInstance.description|escape }}</span>
                            </div>
                          </li>
                        {% endfor %}
                      </ul>
                    </section>
                  {% endif %}
                </section>
              {% endfor %}

              <div id="unhook-button-position-bottom">
                <button type="submit" class="btn btn-default" name="unhookform">
                  <i class="material-icons">indeterminate_check_box</i>
                  {{ 'Unhook the selection'|trans({}, 'Admin.Design.Feature') }}
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    {% else %}
      <p class="alert alert-info alert-can-move">
        {{ 'Note that this page is available in a single shop context only. Switch context to work on it.'|trans({}, 'Admin.Notifications.Info') }}
      </p>
    {% endif %}
{% endblock %}

{% block javascripts %}
  {{ parent() }}
  <script src="{{ asset('themes/new-theme/public/improve_design_positions.bundle.js') }}"></script>
{% endblock %}
